<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap/bootstrap.min.css' %}">
    <script src="{% static 'js/jQuery/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap/bootstrap.min.js' %}"></script>
    <title>注册</title>
</head>
<body>


<!--发送按钮倒计时代码-->
<script type="text/javascript">
    var countdown = 60;

    function settime(obj) {
        if (countdown == 0) {
            obj.removeAttribute("disabled");
            obj.value = "免费获取验证码";
            countdown = 60;
            return;
        } else {
            obj.setAttribute("disabled", true);
            obj.value = "重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function () {
                settime(obj)
            }
            , 1000)
    }

</script>


<!--手机号码输入框代码-->

{#<div class="form-group">#}
{#    <label for="mobile" class="col-lg-2 col-sm-2 control-label">手机号码:</label>#}
{#    <div class="col-lg-10">#}
{#        <div class="input-group m-bot15">#}
{#            <input type="text" class="form-control" id="mobile" name="mobile" placeholder="手机号码">#}
{#            <span class="input-group-btn">#}
{#                         <input type="button" id="forcode" onclick="settime(this)" value="免费获取验证码"#}
{#                                class="btn btn-success">#}
{#                    </span>#}
{#        </div>#}
{#        <p class="help-block">请填写绑定手机号</p>#}
{#    </div>#}
{#</div>#}
<form action="{% url 'register' %}" method="post">

    <input name="mobile" type="text" placeholder="phone" id="mobile"
    /><span class="input-group-btn">
                         <input type="button" id="forcode" onclick="settime(this)" value="免费获取验证码"
                                class="btn btn-success">
                    </span>
    <input name="code" type="text" placeholder="code"
    />
    <input name="password" type="password" placeholder="password"
    />
    {#    {{ register_form.captcha }}#}
    <input type="submit"/>
    {% for key,error in register_form.errors.items %}
        {{ key }}:{{ error }}
    {% endfor %}
    {{ msg }}
    {% csrf_token %}
</form>


<!--向后台通过ajax发送手机号码数据-->
<script>
    $('#forcode').click(function () {
        $.ajax({
            cache: false,
            type: "POST",
            url: "{% url 'users:forcode' %}",
            data: {
                mobile: $("#mobile").val(),
                send_type: 'register'
            },
            async: true,
            beforeSend: function (xhr, settings) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            success: function (data) {
                console.log(data)
                alert(data)
            }
        })
    })
    $('#forgetCode').click(function () {
        $.ajax({
            cache: false,
            type: "POST",
            url: "{% url 'users:forcode' %}",
            data: {
                mobile: $("#mobile").val(),
                send_type: 'reset_pwd'
            },
            async: true,
            beforeSend: function (xhr, settings) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            success: function (data) {
                console.log(data)
                alert(data)
            }
        })
    })
</script>
</body>
</html>